import React, {Component} from "react";
import Axios from "axios";

/*
function fetchByAjax(id,bookVal){
    Axios.get("http://localhost:8080/book/find/" + id).then((response) => {
        console.log(response.data);
        bookVal.setState({
            book : response.data
        });
    });
}
*/

class Book extends Component {
    constructor(props) {
        super(props);
        this.state = {
            book: {}
        };
    }

    render() {
        return (
            <div>
                <h2>书籍的详细信息</h2>
                编号: {this.props.location.state.id}<br/>
                书籍名称：{this.state.book.bookName}<br/>
                作者：{this.state.book.author}<br/>
                价格：{this.state.book.price}<br/>
                出版日期：{this.state.book.publishDate}<br/>
                书籍封面：<img src={this.state.book.photoUrl}/>
            </div>
        );
    }

    // props中有属性的值被修改了之后，这个钩子函数自动被调用
    componentWillReceiveProps(nextProps){
        const  id = nextProps.location.state.id;
        this.fetchByAjax(id,this);
    }

    componentDidMount() {
        const id = this.props.location.state.id;
        this.fetchByAjax(id,this);
    }

    fetchByAjax(id){
        Axios.get("http://localhost:8080/book/find/" + id).then((response) => {
            console.log(response.data);
            this.setState({
                book : response.data
            });
        });
    }
}

export default Book;